<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body class="text-gray-600 font-body">
    <div class="grid md:grid-cols-3">
      <!-- 导航栏区域 -->
      <div class="md:col-span-1 md:flex md:justify-end">
        <nav class="text-right">
          <!-- 标题区域：标题&汉堡图标 -->
          <div class="flex justify-between items-center">
            <!-- 导航栏标题 -->
            <div>
              <h1 class="font-bold uppercase p-4 border-b border-gray-100">
                <a href="/" class="text-sm md:text-xl hover:text-gray-700">
                  Food Present</a
                >
              </h1>
            </div>
            <!-- 汉堡图标 -->
            <div class="px-4 cursor-pointer md:hidden" id="J_burger">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5"
                />
              </svg>
            </div>
          </div>

          <!-- 导航栏列表 -->
          <ul class="text-sm mt-6 hidden md:block" id="J_navlist">
            <li class="text-gray-700 font-bold py-1">
              <a
                href="#"
                class="px-4 flex justify-end border-r-4 border-primary"
              >
                <span>Home</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="w-5 ml-2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
                  />
                </svg>
              </a>
            </li>
            <li class="py-1">
              <a href="#" class="px-4 flex justify-end border-r-4 border-white">
                <span>About</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="w-5 ml-2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
                  />
                </svg>
              </a>
            </li>
            <li class="py-1">
              <a href="#" class="px-4 flex justify-end border-r-4 border-white">
                <span>Contact</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="w-5 ml-2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
                  />
                </svg>
              </a>
            </li>
          </ul>
        </nav>
      </div>

      <!-- 内容区域 -->
      <main class="md:col-span-2 px-16 py-6 bg-gray-100">
        <!-- 登入登出按钮 -->
        <div class="flex justify-center md:justify-end">
          <a
            href="#"
            class="btn text-primary border-primary md:border-2 hover:bg-primary hover:text-white transition ease-out duration-500"
            >Log in</a
          >
          <a
            href="#"
            class="btn text-primary ml-2 border-primary md:border-2 hover:bg-primary hover:text-white transition ease-out duration-500"
            >Sign up</a
          >
        </div>
        <!-- 标题 -->
        <header>
          <h2 class="text-gray-700 text-6xl font-semibold">Recipes</h2>
          <h3 class="text-2xl font-semibold">For you</h3>
        </header>
        <!-- 内容 -->
        <div>
          <h4 class="font-bold mt-12 pb-2 border-b border-gray-200">
            Latest Recipes
          </h4>

          <div class="mt-8 grid lg:grid-cols-3 gap-10">
            <!-- 展示卡片 -->
            <div class="card hover:shadow-lg">
              <!-- 图片 -->
              <img
                src="img/stew.jpg"
                alt="stew"
                class="w-full h-32 sm:h-48 object-cover"
              />
              <!-- 文本信息 -->
              <div class="m-4">
                <span class="font-bold">5 Bean Chilli Stew</span>
                <span class="block text-gray-500 text-sm">Recipe by Mario</span>
              </div>
              <div class="badge">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="w-5 inline-block"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
                <span>25 mins</span>
              </div>
            </div>
            <!-- 展示卡片 -->
            <div class="card hover:shadow-lg">
              <!-- 图片 -->
              <img
                src="img/noodles.jpg"
                alt="noodles"
                class="w-full h-32 sm:h-48 object-cover"
              />
              <!-- 文本信息 -->
              <div class="m-4">
                <span class="font-bold">Veg Noodles</span>
                <span class="block text-gray-500 text-sm">Recipe by Mario</span>
              </div>
              <div class="badge">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="w-5 inline-block"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
                <span>25 mins</span>
              </div>
            </div>
            <!-- 展示卡片 -->
            <div class="card hover:shadow-lg">
              <!-- 图片 -->
              <img
                src="img/curry.jpg"
                alt="curry"
                class="w-full h-32 sm:h-48 object-cover"
              />
              <!-- 文本信息 -->
              <div class="m-4">
                <span class="font-bold">Tofu Curry</span>
                <span class="block text-gray-500 text-sm">Recipe by Mario</span>
              </div>
              <div class="badge">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="w-5 inline-block"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
                <span>25 mins</span>
              </div>
            </div>
          </div>

          <h4 class="font-bold mt-12 pb-2 border-b border-gray-200">
            Most Popular
          </h4>

          <div class="mt-8"></div>

          <div class="flex justify-center">
            <div
              class="btn bg-secondary-100 text-secondary-200 hover:shadow-inner hover:scale-125 hover:bg-opacity-50 transform transition ease-out duration-300"
            >
              Load more
            </div>
          </div>
        </div>
      </main>
    </div>

    <script src="./navModule.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
